/*

Seluruh kode ini ditujukan untuk DIPELAJARI, DIPAHAMI, DIKEMBANGKAN
dan DIGUNAKAN untuk sesuatu yang LEGAL, sesuatu yang PRIBADI dan GRATIS,
dan tidak seharusnya digunakan dengan cara yang instan: salin dan tempel,
serta tidak seharusnya digunakan untuk membuat diri Anda menjadi mirip
(atau bahkan sama) dengan orang lain; untuk menjatuhkan orang lain,
untuk memenuhi nafsu pencitraan diri, kebanggaan palsu dan/atau komersialisasi.

Setiap penjiplak pada dasarnya tidak akan pernah mendapatkan apresiasi dari Saya.
Betapapun kerasnya usaha Anda untuk membuat Saya melegalkan apa yang telah Anda perbuat,
Saya tetap tidak akan pernah memberikan izin kepada Anda.
Jangan mencoba-coba menafsirkan halaman "Kebijakan dan Privasi" blog Saya
sesuai dengan kemauan kalian! Karena keegoisan kalian telah merugikan Saya!

http://www.dte.web.id/p/kebijakan-privasi.html

Meski tidak pernah ada tindakan tegas yang Saya lakukan terhadap para penjiplak,
akan tetapi melalui tulisan ini Saya hanya ingin memberikan pernyataan bahwa,

"SAYA TIDAK PERNAH MEMBERIKAN IZIN DAN TIDAK PERNAH MENGAJARKAN KEPADA ANDA DAN SIAPA SAJA UNTUK
MENJIPLAK, MENYEBARLUASKAN KARYA JIPLAKAN, APALAGI MENJUAL KARYA JIPLAKAN ORANG LAIN, DALAM BENTUK
APAPUN, TANPA MELALUI KESEPAKATAN DARI PIHAK YANG BERSANGKUTAN! (ORANG YANG DIJIPLAK!)"

Anda telah membuat Saya kecewa.
Saya tidak berhasil mengubah pola pikir Anda di dalam menyikapi
karya ciptaan orang lain sesuai dengan apa yang seharusnya.

Saya sangat kecewa.

Selamanya, Saya bersumpah akan selalu setia sebagai orang nomor satu,
yang akan terus membenci siapa saja yang melakukan aktivitas plagiarisme;
membenci siapa saja yang memiliki kegemaran untuk menjiplak,
membantu orang lain untuk menjiplak,
mengajarkan orang lain untuk menjiplak,
mengajak orang lain untuk menjiplak
dan mempermudah orang lain untuk menjiplak.

Matilah Kau, para pembunuh karakter anak bangsa...

FUCK!

*/

/*!
Blogger Template Shell
Name: DTE :]
Designer: Taufik Nurrohman
URL: http://hompimpaalaihumgambreng.blogspot.com
*/

/* Animation */
@-webkit-keyframes init {
  from {opacity:0}
  to {opacity:1}
}
@-moz-keyframes init {
  from {opacity:0}
  to {opacity:1}
}
@-ms-keyframes init {
  from {opacity:0}
  to {opacity:1}
}
@-o-keyframes init {
  from {opacity:0}
  to {opacity:1}
}
@keyframes init {
  from {opacity:0}
  to {opacity:1}
}
@-webkit-keyframes updown {
  from {top:0}
  to {top:-5px}
}
@-moz-keyframes updown {
  from {top:0}
  to {top:-5px}
}
@-ms-keyframes updown {
  from {top:0}
  to {top:-5px}
}
@-o-keyframes updown {
  from {top:0}
  to {top:-5px}
}
@keyframes updown {
  from {top:0}
  to {top:-5px}
}
::selection {
  background-color:#0f666b;
  color:#333;
  text-shadow:none;
}
::-moz-selection {
  background-color:#0f666b;
  color:#333;
  text-shadow:none;
}

/* Normalize */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  font-size:100%;
  vertical-align:baseline;
}
html {overflow-y:scroll}
article,aside,figure,figcaption,footer,header,hgroup,menu,nav,section {display:block}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}
*:focus {outline:none}
time,mark {display:inline}

/* General */
body {
  background-color:#bbb;
  text-align:center;
  font:normal normal 13px/1.5 Ubuntu,"Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  color:#333;
}
strong,b,dt,th,kbd {font-weight:bold}
em,i,dfn,caption,figcaption {font-style:italic}
ins,u {text-decoration:underline}
del {text-decoration:line-through}
mark,.highlight {
  background-color:#FAD163;
  color:black;
}
kbd {
  font-size:86%;
  line-height:100%;
  padding:2px 5px 1px;
  background-color:#eee;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}
h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  letter-spacing:-1px;
  margin:-40px 0 .5em;
  padding-top:60px;
}
h1 {font-size:160%}
h2 {font-size:140%}
h3 {font-size:130%}
h4 {font-size:115%}
h5,h6 {font-size:110%}
p,ul,ol,dl,table,form,figure,blockquote,pre,hr,iframe,.center,.button-group,.update,.block,.tip,.alert,.instruction,.catatan,.jsfiddle-demo,.reference-link,.template {margin-bottom:1.7em}
hr {margin-top:1.7em}
p:last-child,p:only-child {margin-bottom:0}
ul,ol {margin-left:2em}
li,dd {margin:0 0 .4em}
ul ul,ol ol,ul ol,ol ul {
  margin-top:.4em;
  margin-bottom:0;
  margin-left:1.2em;
}
ul {list-style:disc outside}
ol {list-style:decimal outside}
table {border-collapse:collapse;border-spacing:0}
table caption {text-align:left}

/* Safe CSS => Move from <br> tag to <p> tag without destroying my older posts layout */
.safe p+br,.safe ul+br,.safe ol+br,.safe .center+br,.safe .button-group+br,.safe .block+br,.safe .tip+br,.safe .instruction+br,.safe .catatan+br,.safe .alert+br,.safe blockquote+br,.safe pre+br,.safe figure+br,.safe form+br,.safe iframe+br,.safe table+br {display:none}
/* End */

a {
  color:#225588;
  text-decoration:none;
}
a:hover,a:focus {
  color:#5687b8;
  text-decoration:underline;
}
a img {border-width:0}
hr {
  height:0;
  border:none;
  background:none;
  border-bottom:1px dotted #bbb;
}
code {
  color:#888;
  font-family:"Courier New",Courier,Monospace;
  font-size:.923076923077em;
}
code a,code a:hover,code a:focus {color:inherit}
code a:hover,code a:focus {background-color:#E6ECF5}
sup,sub {
  position:relative;
  top:-.4em;
  font-size:96%;
}
sub {top:.4em}
small {font-size:96%}
acronym,abbr {
  cursor:help;
  color:#777;
}
dfn[title],.dfn {cursor:help}
figure {
  text-align:center;
  background-color:#CFDBEC;
  border:1px solid #a5a5a5;
  padding:10px;
}
figure figcaption {
  margin:10px 0 0;
  font-size:86%;
}
blockquote,b[rel="quote"] {
  display:block;
  font:inherit;
  position:relative;
  background-color:#5D73B5;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  padding:1.3em 1.6em;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
blockquote:before,b[rel="quote"]:before {
  content:"";
  width:0;
  height:0;
  border:7px solid transparent;
  border-bottom-color:#5D73B5;
  position:absolute;
  top:-14px;
  right:15px;
}
blockquote a,blockquote a:hover,blockquote a:focus,blockquote code,b[rel="quote"] a,b[rel="quote"] a:hover,b[rel="quote"] a:focus {
  color:#FFEAE5 !important;
  background:none;
  text-shadow:none;
}

/* Forms */
form {font-size:86%}
fieldset {
  border:1px dotted #bbb;
  padding:10px;
  margin:0 0 5px;
}
legend {
  padding:0 1em;
  font-weight:bold;
}
input,button,select,textarea,.button {
  display:inline-block;
  *display:inline;
  width:170px;
  height:auto;
  margin:0 0 5px;
  padding:5px 4px 4px;
  border:1px solid #bbb;
  outline:none;
  background-color:#fafafa;
  font:inherit;
  font-size:100%;
  color:inherit;
  line-height:normal;
  vertical-align:baseline;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
input::-moz-focus-inner,button::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
select {
  padding-top:4px;
  cursor:pointer;
  background-color:white;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
textarea {
  display:block;
  width:auto;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
input:focus,textarea:focus {
  border-color:#907C50;
  background-color:#FFE4B5;
}
input[disabled],button[disabled],select[disabled],textarea[disabled],
input[readonly],textarea[readonly],input[readonly]:focus,textarea[readonly]:focus {
  cursor:default;
  cursor:not-allowed;
  background-color:#eee;
  border-color:#bbb;
  color:#555;
}
input[readonly],textarea[readonly],input[readonly]:focus,textarea[readonly]:focus {cursor:default}
input[type="button"],input[type="submit"],input[type="reset"],button,.button,a.button,
input[type="button"][disabled]:active,input[type="submit"][disabled]:active,input[type="reset"][disabled]:active,button[disabled]:active,.button.disabled:active,a.button.disabled:active {
  width:auto;
  cursor:pointer;
  background-color:#248AB0;
  background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
  border-width:2px;
  border-color:white;
  position:relative;
  top:-3px;
  color:#ebebeb;
  font-weight:bold;
  font-size:86%;
  line-height:normal;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  padding:.5em .9em .4em;
  white-space:nowrap;
}
.button.small,.button.small:active,.button.small:focus {
  font-size:10px;
  border:none;
  padding:.45em .9em;
}
.button.small.square-btn,.button.small.square-btn:active,.button.small.square-btn:focus {
  font-weight:normal;
  text-transform:uppercase;
  border:4px solid #333;
  padding:.4em .8em .5em;
  margin:2px 0 0 2px;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,button:hover,.button:hover,a.button:hover,
input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus,button:focus,.button:focus,a.button:focus {
  background-color:#0671A1;
  color:white;
  border-color:white;
  text-decoration:none;
}
input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active,button:active,.button:active,a.button:active {
  top:-2px;
  background-color:#005E90;
  background-image:-webkit-linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:-o-linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,0));
  background-image:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,0));
  border-color:white;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.4);
  box-shadow:0 0 3px rgba(0,0,0,.4);
}
input[type="button"][disabled],input[type="submit"][disabled],input[type="reset"][disabled],button[disabled],.button.disabled,a.button.disabled,
input[type="button"][disabled]:hover,input[type="submit"][disabled]:hover,input[type="reset"][disabled]:hover,button[disabled]:hover,.button.disabled:hover,a.button.disabled:hover {
  background-color:#bbb;
  border-color:white;
  color:#ebebeb;
  cursor:not-allowed;
}
.button-group {text-align:center}
.button-group .button {
  display:inline;
  padding:1em 1.7em .9em;
  line-height:5.5em;
}
input[type="radio"],input[type="checkbox"],input[type="image"],label {
  cursor:pointer;
  width:auto;
  margin:0;
  padding:0;
  background:none;
  border:none;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}
input[type="radio"],input[type="checkbox"] {
  position:relative;
  top:1px;
}

/* Tables */
table {table-layout:fixed}
table[border="1"] th,table[border="1"] td {
  border:1px solid #bbb;
  padding:.5em .7em;
}
table th,table td {
  vertical-align:top;
  word-wrap:break-word;
}
table caption {
  font-size:96%;
  color:#999;
}
table[border="1"] th {
  background-color:#fafafa;
  text-align:left;
}
table[border="1"] caption {padding:.5em .7em}
table.config {background-color:#FFF0A0}
table.config td,table.config th {border-color:#333}
table.config th {
  background-color:#333;
  color:white;
}
table tr:target td {background-color:#DCE2F3}
table.reference {font-size:86%}

/* Blocks */
.catatan {
  background-color:#FFFAC1;
  padding:1.8em 2em;
  margin-left:2%;
  margin-right:2%;
  font-family:Georgia,"URW Bookman L",Serif;
  font-style:italic;
  line-height:1.42;
  color:#222;
  position:relative;
  text-shadow:none;
}
.catatan:before {
  content:"";
  display:block;
  width:100%;
  height:4px;
  background-color:#4b8db5;
  background-image:-webkit-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-moz-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-ms-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:-o-linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  background-image:linear-gradient(left,#f3a01e,#D05D2A,#9dc425,#4b8db5,#7c48b5);
  position:absolute;
  top:0;
  left:0;
}
.catatan code {font-style:normal}
.catatan.resource {
  margin-left:0;
  margin-right:0;
  font-family:Tahoma,Verdana,Arial,Sans-Serif;
  font-style:normal;
  padding:1.5em;
  background-color:#eee;
}
.catatan.resource img,.catatan.resource a img {
  border:2px solid #aaa;
  padding:0;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.update {
  color:#A73B3B;
  margin-left:1em;
  margin-right:1em;
  border-top:1px solid;
  border-bottom:1px solid;
  padding:.8em 0 1em;
}
.alert,.instruction,.tip {
  background-color:#FFBABA;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  color:#D8000C;
  border:1px solid;
  border-bottom-color:#BF030D;
  padding:.6em 1em;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.2);
}
.instruction {
  background-color:#DFF2BF;
  color:#4F8A10;
  border-bottom-color:#40710A;
}
.tip {
  background-color:#BEDBF4;
  background-image:-webkit-linear-gradient(#BEDBF4,#70B3DC);
  background-image:-moz-linear-gradient(#BEDBF4,#70B3DC);
  background-image:-ms-linear-gradient(#BEDBF4,#70B3DC);
  background-image:-o-linear-gradient(#BEDBF4,#70B3DC);
  background-image:linear-gradient(#BEDBF4,#70B3DC);
  border:1px solid #5E96B7;
  border-bottom-color:#5688A7;
  color:#29526F;
}
.block {
  border:2px solid #888;
  background-color:#ccc;
  padding:6px 10px;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
}
.template {
  max-height:250px;
  overflow:auto;
  background-color:#fafafa;
  border:3px double #bbb;
  width:96%;
  -webkit-box-shadow:inset 0 0 5px #888;
  -moz-box-shadow:inset 0 0 5px #888;
  box-shadow:inset 0 0 5px #888;
  padding:4px;
  font-size:86%;
}
.template table,.template td {
  border:none;
  margin:0;
}
.template table h4 {
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 5px;
  padding:0;
  letter-spacing:0;
}
.template table h4 a,.template table h4 a:visited {
  display:block;
  color:#247C83;
  padding:7px 10px 4px;
  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:-o-linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
  background-image:linear-gradient(left,rgba(0,0,0,.1),rgba(0,0,0,0));
}
.template td {padding:10px}
.template img {
  border:1px solid #ccc;
  background-color:white;
  padding:1px;
  max-width:none;
}
.reference-link p:only-child {text-align:right}

/* Outer */
#out-shadow {
  position:relative;
  text-align:left;
  margin:23px auto 40px;
  width:1250px;
  background-color:#ccc;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4),0 0 9px rgba(0,0,0,.4);
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
}
#out-shadow:after {
  content:"";
  display:table;
  clear:both;
}
#alexa {
  width:250px;
  padding:10px;
  margin:0 auto 30px;
  text-align:center;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 5px black;
  -moz-box-shadow:inset 0 1px 5px black;
  box-shadow:inset 0 1px 5px black;
  border:2px solid #ccc;
}

/* Header */
#header-wrapper {
  background-color:#333;
  color:white;
  margin-bottom:1%;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
  padding:8px 15px 18px;
}
#header {margin:0}
#header a,#header a:visited {color:white}
#header .description {
  font:normal normal 100%/1.5em Alike,Georgia,"URW Bookman L",Serif;
  color:#999;
  padding:5px 30px 0;
  margin:0 0;
}
#header-logo {
  position:relative;
  width:84px;
  height:35px;
  display:block;
  margin:10px 30px 5px;
}
#header-logo span,#header-logo span:before,#header-logo span:after {
  content:"";
  position:absolute;
  display:block;
}
#header-logo .char-d {
  width:7px;
  border:7px solid white;
  top:0;
  bottom:0;
  left:0;
}
#header-logo .char-d:before {
  border:2px solid transparent;
  top:-7px;
  right:-7px;
  border-color:#333 #333 transparent transparent;
}
#header-logo .char-t {
  width:0;
  top:0;
  bottom:0;
  left:27px;
  border-left:7px solid white;
}
#header-logo .char-t:before {
  width:18px;
  height:0;
  border-top:7px solid white;
  top:0;
  left:-12px;
}
#header-logo .char-e {
  width:7px;
  top:0;
  bottom:0;
  left:41px;
  border:7px solid white;
  border-right:none;
}
#header-logo .char-e:before {
  top:7px;
  left:0;
  width:7px;
  border-top:7px solid white;
}
#header-logo .char-symb {
  width:5px;
  top:0;
  bottom:0;
  right:0;
  border:7px solid white;
  border-left:none;
}
#header-logo .char-symb,#header-logo .char-symb:before,#header-logo .char-symb:after {
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}
#header-logo .char-symb:before {
  border:7px solid #5498C9;
  border-width:7px 0;
  width:7px;
  top:0;
  bottom:0;
  left:-10px;
}
#header-logo .char-symb:after {
  width:8px;
  border:8px solid #333;
  border-width:0 0;
  top:-10px;
  right:-8px;
  bottom:-10px;
}
#header-logo:hover .char-symb,#header-logo:focus .char-symb,#header-logo.focused .char-symb {
  -webkit-transform:rotate(450deg) translateX(7px);
  -moz-transform:rotate(450deg) translateX(7px);
  -ms-transform:rotate(450deg) translateX(7px);
  -o-transform:rotate(450deg) translateX(7px);
  transform:rotate(450deg) translateX(7px);
  width:14px;
  margin-right:-7px;
  border-color:#ED1C24;
  -webkit-animation:updown .2s infinite alternate .5s;
  -moz-animation:updown .2s infinite alternate .5s;
  -ms-animation:updown .2s infinite alternate .5s;
  -o-animation:updown .2s infinite alternate .5s;
  animation:updown .2s infinite alternate .5s;
}
#header-logo:hover .char-symb:after,#header-logo:focus .char-symb:after,#header-logo.focused .char-symb:after {border-width:10px 0}
#header-logo:hover .char-symb:before,#header-logo:focus .char-symb:before,#header-logo.focused .char-symb:before {
  border-color:#ED1C24;
  left:-12px;
}

/* Main Nav */
#main-nav {background-color:#333}
.index #main-nav {border-bottom:1px solid #222}
#main-nav ul,#main-nav li {
  margin:0;
  padding:0;
  list-style:none;
  height:35px;
}
#main-nav li {
  float:left;
  display:inline;
  position:relative;
  height:auto;
}
#main-nav a {
  display:block;
  line-height:35px;
  border-left:1px solid #444;
  border-right:1px solid #222;
  color:#aaa;
  text-decoration:none;
  padding:0 1.8em;
}
#main-nav li.home-menu a {border-left:none}
#main-nav li ul {
  background-color:#333;
  border:0;
  position:absolute;
  top:100%;
  left:0;
  width:225px;
  height:auto;
  z-index:88;
  -webkit-box-shadow:0 1px 5px #222;
  -moz-box-shadow:0 1px 5px #222;
  box-shadow:0 1px 5px #222;
  display:none;
}
#main-nav li li {
  float:none;
  display:block;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
#main-nav li ul a {
  height:33px;
  line-height:33px;
  padding:0 .8em 0 1.2em;
  font-size:86%;
}
#main-nav li a:hover,#main-nav li a:focus,#main-nav li:hover>a {color:#666}
#main-nav li:hover ul.hidden {display:block}

/* Main Column */
#main-wrapper {
  width:67%;
  float:left;
  margin:0 0 0 1%;
  padding:10px 0;
  background-color:white;
  background-image:-webkit-linear-gradient(#dedede,white 100px);
  background-image:-moz-linear-gradient(#dedede,white 100px);
  background-image:-ms-linear-gradient(#dedede,white 100px);
  background-image:-o-linear-gradient(#dedede,white 100px);
  background-image:linear-gradient(#dedede,white 100px);
  border:2px solid #888;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  overflow:hidden;
  word-wrap:break-word;
}
.index #main-wrapper {
  background-color:#333;
  background-image:none;
  border-color:#ebebeb;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.custom-status-message {
  margin:0;
  padding:1em 1.5em;
  font-size:96%;
  font-style:italic;
}
.index .custom-status-message {
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
.index .custom-status-message a {color:#5687b8}

/* Sidebar */
.sidebar ul {
  list-style:none;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  margin:0 0 1.25em;
  padding:0;
}
.sidebar ul li {
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  margin:0;
  padding:3px 10px;
}
.sidebar p {margin:0 0 .6em}
.sidebar a {
  color:#999;
  text-decoration:none;
  text-shadow:0 1px 0 black;
}
.sidebar a:visited {color:#666}
.sidebar a:hover,.sidebar a:visited:hover,.sidebar a:focus,.sidebar a:visited:focus {
  color:white;
  text-decoration:none;
}
#sidebar-wrapper {
  width:28.8%;
  float:right;
  margin:0 1% 10px 0;
  padding:0;
  background-color:#333;
  border:4px solid #ddd;
  font-size:90%;
  color:#666;
  position:relative;
  right:-2px;
  -webkit-box-shadow:inset 0 0 5px black;
  -moz-box-shadow:inset 0 0 5px black;
  box-shadow:inset 0 0 5px black;
  overflow:hidden;
  word-wrap:break-word;
}
#sidebar-wrapper .widget {margin:0}
#sidebar-wrapper .widget-content {
  margin:0;
  padding:10px;
}
#sidebar-wrapper h2 {
  cursor:pointer;
  margin:0;
  padding:0 .8em;
  background-color:#333;
  background-image:-webkit-linear-gradient(#333,#3c3c3c);
  background-image:-moz-linear-gradient(#333,#3c3c3c);
  background-image:-ms-linear-gradient(#333,#3c3c3c);
  background-image:-o-linear-gradient(#333,#3c3c3c);
  background-image:linear-gradient(#333,#3c3c3c);
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  font-weight:bold;
  font-size:100%;
  line-height:30px;
  color:#bbb;
  text-shadow:0 1px 0 black;
  text-transform:uppercase;
  height:28px;
}
#sidebar-wrapper h2.active,.no-js #sidebar-wrapper h2 {
  background-image:-webkit-linear-gradient(#3c3c3c,#333);
  background-image:-moz-linear-gradient(#3c3c3c,#333);
  background-image:-ms-linear-gradient(#3c3c3c,#333);
  background-image:-o-linear-gradient(#3c3c3c,#333);
  background-image:linear-gradient(#3c3c3c,#333);
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  border-color:#555 transparent #222;
}

/* Loading Message Holder */
#loading-text {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}
#loading-text span {
  display:inline;
  background-color:#900;
  padding:5px 10px 7px;
  font:normal bold 11px/24px Arial,Sans-Serif;
  color:white;
}
#loading-text .notif-count {
  display:block;
  position:absolute;
  top:0;
  left:50%;
  width:66px;
  height:17px;
  background-color:#900;
  padding:1px 0 0;
  font:normal bold 8px/15px Tahoma,Verdana,Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  margin:3px auto 0 -33px;
  overflow:hidden;
}

/* Dialog Box */
#alert-box {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
}
#alert-box .message {
  text-align:left;
  color:white;
  width:370px;
  margin:0 auto;
  padding:1.2em 1.4em;
  background-color:#174A87;
  border:10px solid #0A2E58;
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  -webkit-box-shadow:0 0 2px 1px black,0 0 10px black;
  -moz-box-shadow:0 0 2px 1px black,0 0 10px black;
  box-shadow:0 0 2px 1px black,0 0 10px black;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#alert-box .button-group {margin:1.7em 0 0}
#alert-box button {
  border:none;
  margin:0 2px;
}

/* Demo Frame */
.jsfiddle-demo {
  display:block;
  width:99%;
  height:300px;
  /* border:2px solid #4474A5; */
  border:2px solid #bbb;
}

/* Footer */
#main-footer {
  font-family:Alike,Georgia,"URW Bookman L",Serif;
  color:#999;
  background-color:#333;
  margin-top:1%;
  padding:15px 15px 8px;
  -webkit-border-radius:0 0 7px 7px;
  -moz-border-radius:0 0 7px 7px;
  border-radius:0 0 7px 7px;
}
#main-footer a,#main-footer a:visited {color:white}
#main-footer .blog-dir {
  opacity:0;
  overflow:hidden;
  -webkit-transition:opacity .4s ease-out;
  -moz-transition:opacity .4s ease-out;
  -ms-transition:opacity .4s ease-out;
  -o-transition:opacity .4s ease-out;
  transition:opacity .4s ease-out;
}
#main-footer:hover .blog-dir {opacity:1}
#main-footer .copyright {overflow:hidden}

/* Loading... */
h1,h2,h3,h4,h5,h6,#sidebar-wrapper,#main-wrapper,#top-ribbon,#ad-wrapper {
  -webkit-animation:init 1s;
  -moz-animation:init 1s;
  -ms-animation:init 1s;
  -o-animation:init 1s;
  animation:init 1s;
}
#top-ribbon,#ad-wrapper {
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -ms-animation-duration:2s;
  -o-animation-duration:2s;
  -animation-duration:2s;
}

/* Loading Overlay */
#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#222;
  z-index:9999;
  text-align:center;
  padding:70px 0 0;
  display:none;
}

/* Contact Frame */
#contact-frame {
  width:560px;
  height:375px;
  border:none;
  background-color:#333;
  position:absolute;
  top:100px;
  left:50%;
  z-index:9999;
  margin:0 0 0 -280px;
  overflow:hidden;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
}
#contact-close {
  position:absolute;
  top:105px;
  left:50%;
  margin:0 0 0 -268px;
  border:none;
  z-index:99999;
  text-decoration:none;
  font-weight:bold;
  font-size:150%;
  line-height:normal;
  color:white;
}

/* Status Panel */
#status {
  position:absolute;
  padding:7px 12px 7px 10px;
  text-align:right;
  top:54px;
  left:-4px;
  z-index:8;
  cursor:help;
  background-color:#DC4236;
  font-size:96%;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
  -webkit-transition:top .5s ease-in-out;
  -moz-transition:top .5s ease-in-out;
  -ms-transition:top .5s ease-in-out;
  -o-transition:top .5s ease-in-out;
  transition:top .5s ease-in-out;
  overflow:hidden;
}
#status a {color:#ffa}
#status strong {
  cursor:pointer;
  float:right;
  width:16px;
  height:16px;
  font-size:78%;
  line-height:16px;
  text-align:center;
  background-color:#8B271F;
  -webkit-border-radius:12px;
  -moz-border-radius:12px;
  border-radius:12px;
  -webkit-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  transition:all .5s ease-in-out;
}
#status h2 {
  font-size:110%;
  background-image:-webkit-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:linear-gradient(left,rgba(0,0,0,.2),rgba(0,0,0,0));
  margin:0 0 10px;
  padding:5px 10px;
}
#status .section {
  text-align:left;
  width:300px;
  height:300px;
  margin:0 10px 0;
  padding:0;
  position:relative;
  top:-12px;
  left:-10px;
  display:none;
}
#status .widget,#status .widget-content {
  margin:0;
  padding:0;
  width:auto;
}
#status:hover strong {
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}

/* 'Top' Link */
#gotop {
  cursor:pointer;
  width:30px;
  height:30px;
  position:fixed !important;
  position:absolute;
  bottom:-40px;
  right:-40px;
  z-index:999;
  text-indent:-9999px;
  border:1px solid #144F69;
  background-color:#067BAF;
  background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);
  background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);
  -webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;
  -webkit-border-radius:10px 0 0 0;
  -moz-border-radius:10px 0 0 0;
  border-radius:10px 0 0 0;
  overflow:hidden;
}
#gotop:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border-width:10px 4px;
  border-style:solid;
  border-color:transparent transparent #C3D1D7 transparent;
  position:absolute;
  top:0;
  left:11px;
}
#gotop:focus {outline:none}
#gotop:hover:after {border-bottom-color:white}
#gotop:active {
  background-image:-webkit-linear-gradient(#144F69,#2493C4);
  background-image:-moz-linear-gradient(#144F69,#2493C4);
  background-image:-ms-linear-gradient(#144F69,#2493C4);
  background-image:-o-linear-gradient(#144F69,#2493C4);
  background-image:linear-gradient(#144F69,#2493C4);
}

/* Main Classes */
.loader {background:transparent url('') no-repeat 50% 120px}
.benar,.true {background-color:#EDFFCE}
.salah,.false {background-color:#FFDED8}
.float-left {float:left}
.float-right {float:right}
.clear {display:block;clear:both}
.text-center {text-align:center}
.text-left {text-align:left}
.text-right {text-align:right}
.alignleft,.align-left {float:left;margin:4px 2em .7em 0}
.alignright,.align-right {float:right;margin:4px 0 2em .7em}
.center {margin-left:auto;margin-right:auto;display:block;text-align:center}
.full {width:96.8%;max-width:96.8%;margin-left:auto;margin-right:auto}
.underline {border-bottom:1px dashed}
.hidden {display:none}
.accessible-hidden,.screen-reader {position:absolute!important;overflow:hidden;clip:rect(0px 0px 0px 0px);clip:rect(0px,0px,0px,0px);height:1px;width:1px;margin:-1px 0 0;padding:0;border:0}
.ir {font:normal normal 0/0 a;color:transparent;text-shadow:none}

/* Other... */
.rm-button-wrap {
  position:absolute;
  bottom:10px;
  right:10px;
  left:0;
  margin-left:100px;
}
.target-elem:before { /* Jump-Link class name */
  content:"";
  display:block;
  height:40px;
  margin-top:-40px;
}
a.subscribe,a.subscribe:hover,a.subscribe:focus {
  font-size:80%;
  color:#eee;
  background-color:#527915;
  text-transform:uppercase;
  position:relative;
  top:-3px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  margin:0 7px;
  padding:3px 10px;
  text-decoration:none;
}
a.subscribe:hover,a.subscribe:focus {background-color:#4B6F15}
a.subscribe:active {
  background-color:#999;
  color:white;
}
.color-box {
  display:inline-block;
  width:30px;
  height:30px;
  background-color:white;
  border:2px solid #222;
  border-color:rgba(0,0,0,.2);
  font:normal normal 0/0 a;
  color:transparent;
  text-shadow:none;
}
.color-box:hover,.color-box:focus {
  border-color:#333;
  border-color:rgba(0,0,0,.4);
}

/* Breadcrumb */
.breadcrumb {
  position:fixed !important;
  position:absolute;
  z-index:100;
  top:0;
  right:0;
  left:0;
  background-color:#333;
  color:#ccc;
  border-bottom:2px solid #999;
  padding:2px 0 2px 1%;
  -webkit-box-shadow:0 0 7px black;
  -moz-box-shadow:0 0 7px black;
  box-shadow:0 0 7px black;
}
.breadcrumb a,.breadcrumb a:visited,.breadcrumb a:hover,.breadcrumb a:focus,.breadcrumb a:active {
  color:white;
  text-decoration:none;
}
.breadcrumb a:hover,.breadcrumb a:focus {color:#ccc}
.breadcrumb .kanan {
  position:absolute;
  top:2px;
  right:1%;
}

/* Above post */
#date-published {
  display:block;
  margin:-10px 0 30px;
  font-family:Alike,Georgia,"URW Bookman L",Serif;
  border-right:5px solid #39f;
  padding:0 15px 0 0;
  text-align:right;
  position:relative;
}
.reaction-button {
  display:block;
  width:100%;
  height:22px;
  position:absolute;
  top:-2px;
  right:0;
  left:-12px;
}

/* Posts */
.index .post-outer {
  float:left;
  width:50%;
}
.post {
  border-top:1px dotted #bbb;
  border-bottom:1px dotted #bbb;
  margin:.3em 0 25px;
  padding:0 13px;
}
.index .post {
  margin:0;
  padding:0;
  border:none;
  color:#999;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
.post-title {
  letter-spacing:0;
  border:1px dotted #bbb;
  border-top-width:0;
  font:normal normal 146%/1.6 Alike,Georgia,"URW Bookman L",Serif;
  padding:3px 14px 5px;
  margin:0;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}
.index .post-title {
  border:0 solid;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  padding:0 15px;
  font:normal normal 14px/36px Alike,Georgia,"URW Bookman L",Serif;
  height:36px;
  overflow:hidden;
  text-transform:uppercase;
  text-shadow:0 -1px 0 #111;
}
.post-title a,.post-title a:hover {
  text-decoration:none;
  color:inherit;
}
.post-title a:focus {outline:1px dotted}
.index .post-title:hover {border-left:4px solid #066696}
.post a img {
  padding:4px;
  background-color:#eee;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.index .post-thumbnail {
  width:72px;
  height:72px;
  background-color:#222;
  float:left;
  margin-right:10px;
  overflow:hidden;
}
.post-body {
  border:1px dotted #bbb;
  border-width:0 1px;
  padding:20px 14px;
}
.index .post-body {
  margin:0;
  border:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  height:130px;
  font-size:96%;
  text-align:right;
  position:relative;
}
.index .post-snippet {
  position:relative;
  word-wrap:break-word;
  overflow:hidden;
}
.index .post-snippet:before{content:attr(data-snip)}

/* Archive Page */
.archive #main-wrapper {margin-bottom:15px}
.archive .blog-posts {margin-top:15px}
.archive .post {
  margin:0;
  border:none;
}
.archive .post-body,.archive .post-footer {display:none}
.archive .post-title {
  border:none;
  font:inherit;
  margin:2px 0 0;
  padding:0;
}
.archive .post-title a {
  display:block;
  background-color:#248AB0;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  padding:5px 10px;
}
.archive .post-title a:hover,.archive .post-title a:focus {background-color:#0671A1}
.archive .post-title a:active {background-color:#005E90}
/* End Archive Page */

.post-body figure img {
  border:none;
  background:none;
  padding:0;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,.7);
  box-shadow:0 0 3px rgba(0,0,0,.7);
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  display:block;
  margin:0 auto;
}
.post-body section {
  padding-top:30px;
  margin-top:-30px;
}
.post-body section footer {clear:both}
.post-body .table-of-content,.post-body section .reference-breadcrumb {
  font-size:86%;
  padding:2px 5px;
  background-color:#f5f5f5;
}
.post-body .table-of-content {
  padding:10px 5px 5px;
  border:2px solid #eee;
}
.post-body .table-of-content ol,.post-body .table-of-content ul {margin-bottom:8px}
.post-body ul.listing {
  font-size:10px;
  text-transform:uppercase;
}
.post-body ul.listing li {margin-bottom:0}
.post-body ul.listing li.title {
  list-style:none;
  font-weight:bold;
  margin-left:-14px;
}
.post-body .ad-text {margin-bottom:30px}
.post-footer {
  background-color:#eee;
  border:1px dotted #bbb;
  border-bottom-width:0;
  font-size:80%;
  color:#666;
  text-transform:uppercase;
  font-weight:bold;
  padding:4px 14px;
}
.post-footer .span {margin-right:.3em}
.index .post-footer,img.icon-action{display:none}

/* Code Snippet Page */
.index .snippet-list {
  margin:0;
  border-bottom:1px solid #444;
}
.index .snippet-list li {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
.index .snippet-list a {
  display:block;
  padding:.7em 1.2em;
  font-size:130%;
  font-family:Alike,Georgia,"URW Bookman L",Serif;
  text-decoration:none;
  text-shadow:0 -1px 0 #222;
  color:#4A8DBD;
  overflow:hidden;
}
.index .snippet-list a:active,.index .snippet-list a.active {color:white}
.index .snippet-list .label-name {
  background-color:#999;
  text-shadow:none;
  color:white;
  font-size:10px;
  font-weight:normal;
  font-family:Ubuntu,Trebuchet,"Trebuchet MS",Arial,Sans-Serif;
  text-transform:uppercase;
  padding:4px 7px;
  display:block;
  float:right;
  margin-left:4px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.index .snippet-list .label-name.css {background-color:#5DA028}
.index .snippet-list .label-name.javascript {background-color:#888}
.index .snippet-list .label-name.jquery {background-color:#7073CF}
.index .snippet-list .label-name.xml {background-color:#C44032}
.index .snippet-list .label-name.html {background-color:#4584BE}

/* Related Posts */
#related-posts {margin:.7em 3% 1em}
#related-posts h2 {
  margin:0 .3em .7em;
  padding:0;
}
#related-posts-border {
  color:#999;
  background-color:#333;
  -webkit-box-shadow:inset 0 0 7px black;
  -moz-box-shadow:inset 0 0 7px black;
  box-shadow:inset 0 0 7px black;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:7px;
}
.related-posts-container {
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  height:370px;
  overflow:auto;
  padding:1.8em;
}
.related-posts-container a {color:#5687b8}
.related-posts-container a:hover,.related-posts-container a:focus {text-decoration:underline}
.sidebar .related-posts-container ul {margin:.7em 0 2em}

/* Blog Pager */
#blog-pager {
  clear:both;
  text-align:right;
  padding:0 3%;
  line-height:4.6em;
}
.index #blog-pager {border-top:1px solid #444}

/* Sidebar and Advertisement */
.sidebar {line-height:1.4}
#about h2,.sidebar h2,.sidebar-box h2 {letter-spacing:0}
#ad-wrapper,.sidebar-box {
  width:29%;
  float:right;
  display:inline;
  color:#999;
  background-color:#333;
  -webkit-box-shadow:inset 0 0 2px black;
  -moz-box-shadow:inset 0 0 2px black;
  box-shadow:inset 0 0 2px black;
  margin:0 1.05% 1em 0;
}
.sidebar-box {
  width:28.8%;
  min-height:100px;
  margin:0 1% 10px 0;
  border:2px solid #999;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.sidebar-box h2 {
  background-color:#333;
  font-size:86%;
  font-weight:bold;
  line-height:26px;
  text-transform:uppercase;
  text-align:center;
  position:relative;
  z-index:4;
  color:#aaa;
  padding:2px 0 0;
  margin:0;
  border-bottom:1px solid #222;
  -webkit-box-shadow:0 1px 0 #444;
  -moz-box-shadow:0 1px 0 #444;
  box-shadow:0 1px 0 #444;
}
#quote-frame iframe,.sidebar-box iframe {
  display:block;
  overflow:hidden;
}
#updated-posts-container {height:420px}
#ad-1 {
  text-align:center;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:inset 0 0 3px black;
  -moz-box-shadow:inset 0 0 3px black;
  box-shadow:inset 0 0 3px black;
  margin:7px;
  padding:1.4em 1em 1em;
}
#ad-1 a img {
  width:125px;
  height:125px;
  border:none;
  background:none;
  -webkit-box-shadow:0 0 2px black;
  -moz-box-shadow:0 0 2px black;
  box-shadow:0 0 2px black;
  padding:4px;
}
#ad-1 a:hover img,#ad-1 a:focus img {background-color:#6788E8}
#ad-2 {
  text-align:center;
  padding:0 0 20px;
}
#ad-2 iframe {margin:10px auto}
.paypal-donate {margin:2em 0 0}
.paypal-donate form {margin:0}
#ad-banner-wrapper {
  text-align:left;
  margin:0 0 0 1.8%;
}
img.ad-banner {
  border:4px solid #2c2c2c;
  width:88%;
  margin:0 0 2px;
}
#ad-banner-wrapper a:focus img.ad-banner {border-color:#ff0}
.index .ad-banner-5 {
  padding:.5em 1em;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  text-align:left;
  line-height:0;
}
#ad-bottom {
  width:auto;
  margin:200px 0 0;
  overflow:hidden;
}
#ad-bottom img {
  width:125px;
  height:125px;
  border:2px solid #666;
  float:left;
  margin:0 1em 0 0;
}
#ad-bottom strong {
  display:block;
  margin-bottom:5px;
}
#ad-bottom .container {
  border-top:5px solid #0186CB;
  background-color:#eee;
  width:44.8%;
  overflow:hidden;
  padding:2% 2% 1018px 2%;
  margin:0 0 -1000px 0;
}
#ad-bottom .container:hover img {border-color:#FF5DC2}
.inline-ad {
  margin:-10px 14px 10px;
  background-color:#eee;
  border-top:4px solid #0186CB;
  padding:10px;
  position:relative;
  text-align:left;
  clear:both;
}
.inline-ad .snippet-outer {
  width:auto;
  margin-left:315px;
}
.inline-ad .snippet-outer ul {
  margin:7px 0 0;
  padding:0;
}
.inline-ad .snippet-outer li {
  list-style:none;
  margin:0 0 2px;
  background-color:#e5e5e5;
  padding:0 7px 0 7px;
  line-height:24px;
  height:24px;
  overflow:hidden;
  border-bottom:1px dotted #ccc;
}

/* Top ribbon */
#top-ribbon {
  position:absolute;
  top:0;
  right:27.5%;
  z-index:10;
  width:108px;
  height:260px;
  background-color:#333;
  color:#999;
  -webkit-box-shadow:0 5px 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 5px 7px rgba(0,0,0,.7);
  box-shadow:0 5px 7px rgba(0,0,0,.7);
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
  -webkit-transition:right .15s linear;
  -moz-transition:right .15s linear;
  -ms-transition:right .15s linear;
  -o-transition:right .15s linear;
  transition:right .15s linear;
  border:1px solid;
  border-color:#444 #222 #222 #444;
  padding:10px;
}
#top-ribbon:after {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:100%;
  left:20px;
  border:15px solid transparent;
  border-top-color:#333;
}
#top-ribbon .img-container {
  width:82px;
  border:3px double #3c3c3c;
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  box-shadow:inset 0 0 2px rgba(0,0,0,.4);
  margin:0 0 10px auto;
  padding:10px;
}
#top-ribbon .img-container img {
  display:block;
  background-color:#3c3c3c;
  padding:5px 0;
}
#level {
  width:108px;
  display:block;
  margin:0 0 0 auto;
}
#level li {
  display:block;
  margin:0 0 2px;
  list-style:none;
}
#level li a {
  display:block;
  background-color:#3c3c3c;
  color:#ccc;
  font:normal normal 8px/normal Arial,Sans-Serif;
  text-transform:uppercase;
  position:relative;
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
  padding:6px 10px;
}
#level li a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:0;
  right:0;
  border:11px solid transparent;
  border-right-color:#333;
}
#level li a:hover,#level li a:focus {
  -webkit-transition-duration:0s;
  -moz-transition-duration:0s;
  -ms-transition-duration:0s;
  -o-transition-duration:0s;
  transition-duration:0s;
  color:white;
  text-decoration:none;
  padding:6px 0 6px 15px;
}
#level li.l-1 a:hover,#level li.l-1 a:focus {background-color:#DC98FF}
#level li.l-2 a:hover,#level li.l-2 a:focus {background-color:#FF5DC2}
#level li.l-3 a:hover,#level li.l-3 a:focus {background-color:#0186CB}
#level li.l-4 a:hover,#level li.l-4 a:focus {background-color:#0251C9}
[data-tag="Dasar"] #level li.l-1,[data-tag="Menengah"] #level li.l-2,[data-tag="Tingkat Lanjut"] #level li.l-3,[data-tag="Eksperimen"] #level li.l-4,#level li.current a {border-left:2px solid #39f}

/* Search Form and Subscribe Form */
#cse-search-box,
#subscribe-form form {font:inherit}
#cse-search-box {
  position:absolute;
  top:15px;
  right:17px;
  z-index:10;
  vertical-align:top;
  text-align:right;
  width:165px;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
#cse-search-box input.search-field,
#subscribe-form input {
  background-color:#444;
  width:145px;
  padding:1px;
  -webkit-box-shadow:inset 0 0 2px #333;
  -moz-box-shadow:inset 0 0 2px #333;
  box-shadow:inset 0 0 2px #333;
  border:1px solid;
  border-color:#222 #444 #444 #222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}
#cse-search-box input.search-field:focus {
  width:160px;
  color:white;
  background-color:#F3A01E;
  -webkit-box-shadow:0 0 2px white,0 0 30px white;
  -moz-box-shadow:0 0 2px white,0 0 30px white;
  box-shadow:0 0 2px white,0 0 30px white;
  border-color:white;
}
#subscribe-form {
  width:210px;
  padding:0 0 7px;
  background-color:#5D73B5;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  position:absolute;
  top:10px;
  left:10px;
  display:none;
}
#subscribe-form input.email-input {
  width:173px;
  margin:10px 0 7px 10px;
  padding:7px;
  font-size:86%;
}
#subscribe-form input.email-submit {
  width:auto;
  margin:0 0 0 10px;
  padding:4px 8px;
  border:none;
  text-shadow:none;
  background-color:#405289;
  background-image:none;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
#subscribe-form input.email-submit:hover,#subscribe-form input.email-submit:focus {
  background-color:#2E3E6A;
  background-image:none;
}
a.close-form,a.close-form:hover,a.close-form:focus {
  float:right;
  margin:0 8px 1px 0;
  color:white;
  font-family:Tahoma,Verdana,Arial,Sans-Serif;
  font-size:110%;
  line-height:100%;
  text-decoration:none;
}
a.close-form:hover,a.close-form:focus {color:#ccc}

/* Widgets */
#HTML2 .widget-content {text-align:center}
#HTML2 img {
  display:inline;
  background-color:black;
  padding:4px;
  border:none;
  opacity:.7;
}
#HTML2 img:hover {opacity:1}
.widget.PopularPosts .widget-content {
  font-size:96%;
  line-height:normal;
}
.widget.PopularPosts li {padding:.5em 0 .8em}
.widget.PopularPosts .item-title a {
  display:block;
  font-weight:bold;
  margin:0 0 .2em;
}
.widget.PopularPosts img {
  padding:0;
  margin:5px 10px 0 0;
  border:none;
  background-color:#111;
  float:left;
}
.widget.PopularPosts a.more-link,.widget.PopularPosts a.more-link:hover,.widget.PopularPosts a.more-link:focus {
  display:block;
  float:right;
  color:#333;
  background-color:#999;
  line-height:100%;
  margin:1em 0 0;
  padding:2px 6px 4px 5px;
  font-size:10px;
  font-style:italic;
  text-decoration:none;
  text-shadow:none;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}
.widget.PopularPosts a.more-link:hover,.widget.PopularPosts a.more-link:focus {background-color:white}
.widget.BlogArchive {text-align:left}
.widget.BlogArchive ul,
.widget.BlogArchive li,
.widget.BlogArchive ul ul,
.widget.BlogArchive li li {
  font-weight:bold;
  margin:0;
  padding:0;
  border:none;
  list-style:none;
}
.widget.BlogArchive a.post-count-link,.widget.BlogArchive a.post-count-link:link,.widget.BlogArchive a.post-count-link:visited,.widget.BlogArchive a.toggle,.widget.BlogArchive a.toggle:link,.widget.BlogArchive a.toggle:visited,.widget.BlogArchive a.toggle:hover {text-decoration:none}
.widget.BlogArchive .toggle {
  cursor:pointer;
  font-family:Arial,Sans-Serif;
  line-height:100%;
}
.widget.BlogArchive ul li {
  margin:2px 0;
  padding:.2em .2em 0;
  background-color:#232323;
}
.widget.BlogArchive li li {
  padding:0 0 0 1.4em;
  margin:0;
  font-size:96%;
  font-weight:normal;
}
.widget.BlogArchive ul ul:last-child {padding:0 0 .3em}
.widget.BlogArchive .collapsed ul {display:none}
.rpthumb {
  background-color:#333;
  margin:0;
  padding:0;
  font-size:86%;
  font-weight:bold;
  line-height:normal;
}
.rpthumb li {
  height:44px;
  list-style:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
  padding:7px 7px;
  margin:0;
  overflow:hidden;
  background-color:#333;
  text-align:left;
}
.rpthumb li a {
  color:#999;
  display:block;
}
.rpthumb li a:hover,.rpthumb li a:focus {color:white}
.rpthumb img.rp-thumb {
  outline:none;
  border:2px solid black;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0 10px 0 0;
  width:40px;
  height:40px;
}
.rpthumb span {
  font-size:96%;
  color:#666;
}
.frame-preloader iframe {
  border:none;
  width:100%;
}

/* About Panel */
#about {
  width:90%;
  margin:1em auto;
  padding:1em;
  text-align:left;
  border:3px double #3c3c3c;
  position:relative;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.6);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.6);
  box-shadow:0 0 2px rgba(0,0,0,.6);
  display:none;
}
#about p {margin:0 0 1.2em}
#about h2 {
  background-color:#3c3c3c;
  font:normal normal 120%/2em Alike,Georgia,"URW Bookman L",Serif;
  text-transform:uppercase;
  position:relative;
  margin:0 0 1.2em;
  padding:0 .8em;
  color:white;
}
#about .col a {color:#5687b8}
#about .sidebar a:hover,#about .sidebar a:focus {text-decoration:underline}
#about .col {
  width:56%;
  height:570px;
  display:inline;
  color:#ccc;
  overflow:auto;
  margin:0 1%;
}
#about .col.float-left {
  margin-right:0;
  padding-right:20px;
  border-right:7px solid #3582d0;
}
#about .col.float-right {
  width:36%;
  margin-left:0;
}
#about .drop-cap {
  font:normal normal 22px/normal Alike,Georgia,"URW Bookman L",Serif;
  color:white;
  text-align:center;
  width:30px;
  height:auto;
  background-color:#3c3c3c;
  position:relative;
  margin:2px 10px 2px 0;
  padding:10px 0 30px;
}
#about .drop-cap:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:15px solid transparent;
  border-bottom-color:#333;
  position:absolute;
  bottom:0;
  left:0;
}
#hide-about,#hide-about:hover,#hide-about:focus {
  cursor:pointer;
  position:absolute;
  top:6px;
  right:6px;
  background:none;
  font:normal bold 13px/14px Georgia,"URW Bookman L",Serif;
  color:white;
  text-decoration:none;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  padding:2px 6px 4px;
}
#hide-about:hover,#hide-about:focus {
  background-color:white;
  color:black;
}

/* Comments */
.comments {
  padding:2em;
  margin:0 2%;
  background-color:#2f2f2f;
  border:2px solid #666;
  -webkit-box-shadow:inset 0 0 7px black;
  -moz-box-shadow:inset 0 0 7px black;
  box-shadow:inset 0 0 7px black;
  color:white;
}
.comments .note,em[rel="note"] {
  display:block;
  padding:5px 10px;
  border:1px solid black;
  background-color:#222;
  background-image:-webkit-linear-gradient(#333,#222);
  background-image:-moz-linear-gradient(#333,#222);
  background-image:-ms-linear-gradient(#333,#222);
  background-image:-o-linear-gradient(#333,#222);
  background-image:linear-gradient(#333,#222);
  -webkit-box-shadow:0 0 0 1px #555;
  -moz-box-shadow:0 0 0 1px #555;
  box-shadow:0 0 0 1px #555;
  color:#ccc;
  font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;
  text-shadow:0 1px 0 black;
}
.comments .note a,.comments .note code {font-size:100%}
.comments img.incomment,.comments blockquote img.incomment {
  display:block;
  margin:2px auto 0;
}
.comments pre,i[rel="pre"],.comments blockquote,.comments b[rel="quote"] {margin:5px 0}
.comments a {color:#5687B8}
.comments a.allow,i[rel="anchor"] {font-size:97%}
.comments code,i[rel="code"],#respond em {
  color:inherit;
  font:normal normal 12px/1.4 "Courier New",Courier,Monospace;
}
.comments code a,.comments code a:hover,.comments code a:focus {
  color:inherit;
  background:none;
}
.comments i[rel="image"] {
  display:block;
  margin:2px auto;
  width:50px;
  height:50px;
  border:5px solid #222;
  background-color:white;
  font:normal normal 0/0 a;
  color:transparent;
  text-shadow:none;
  overflow:hidden;
  position:relative;
}
.comments iframe.video {
  width:320px;
  max-width:320px;
  height:224px;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
  display:block;
  margin:10px auto;
  border:4px solid #444;
  background-position:50% 50%;
}
.comments h4 {
  color:white;
  font-size:116%;
  margin:1.5em 0 1em;
  padding:0;
  letter-spacing:0;
}
.comments .avatar-image-container {
  margin:0 0 3px;
  border:1px solid #3c3c3c;
  padding:4px;
  width:45px;
  height:45px;
  max-width:100%;
  max-height:100%;
  float:none;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
  background-color:#666;
  -webkit-background-clip:content-box;
  -moz-background-clip:content-box;
  background-clip:content-box;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
.comments .avatar-image-container img {
  width:45px;
  height:45px;
  max-width:100%;
  max-height:100%;
  overflow:visible;
  float:none;
}
.comments .avatar-image-container img:hover {opacity:.7}
.comments .button {color:#ebebeb}
#cm_block {visibility:hidden}
.cm_wrap {
  clear:both;
  float:right;
  margin-bottom:4px;
  width:100%;
  position:relative;
}
.cm_head {
  width:58px;
  float:left;
}
.cm_reply a {
  display:block;
  width:auto;
  margin:0 0 1px 3px;
  padding:2px 7px 3px;
  text-transform:none;
  color:white;
  background-color:#527915;
  background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));
  font:inherit;
  font-size:80%;
  line-height:normal;
  -webkit-box-shadow:0 2px 2px black;
  -moz-box-shadow:0 2px 2px black;
  box-shadow:0 2px 2px black;
  -webkit-border-radius:3px 0 0 3px;
  -moz-border-radius:3px 0 0 3px;
  border-radius:3px 0 0 3px;
  -webkit-transition:all .16s ease-in-out;
  -moz-transition:all .16s ease-in-out;
  -ms-transition:all .16s ease-in-out;
  -o-transition:all .16s ease-in-out;
  transition:all .16s ease-in-out;
}
.cm_reply .item-control {display:block}
.cm_reply a:hover,.cm_reply a:focus,.cm_reply a.clicked {
  color:white;
  margin:0 0 1px -3px;
  padding:2px 10px 3px 7px;
  outline:none;
  text-decoration:none;
}
.cm_reply a:focus,.cm_reply a.clicked {background-color:#890586}
.cm_reply a:active {
  background-image:-webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:-o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));
  outline:none;
}
.cm_entry {
  margin:0 0 0 58px;
  padding:1.26em;
  border:1px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
  overflow:hidden;
  position:relative;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  transition:all 1s ease-out;
}
.cm_entry .author-mark {
  display:block;
  width:0;
  height:0;
  border:12px solid transparent;
  border-color:transparent #900 #900 transparent;
  position:absolute;
  right:0;
  bottom:0;
}
.cm_entry .cm_info,.cm_entry .para {
  border:1px solid #555;
  background-color:#444;
  padding:.5em .8em;
}
.cm_entry .cm_info {margin-bottom:2px}
.cm_entry .para {
  clear:both;
  word-wrap:break-word;
}
.cm_name {
  font-weight:bold;
  font-style:normal;
  float:left;
}
.cm_date {
  font-size:84%;
  font-style:italic;
  line-height:1.8;
  color:#888;
  float:right;
}
.cm_entry .para.deleted-by-js {color:#bbb}
.cm_entry .para.deleted-by-js textarea {
  width:100%;
  height:120px;
  margin:1.7em auto;
}
.cm_pagenavi {
  font-size:10px;
  text-transform:uppercase;
  color:#666;
  font-weight:bold;
}
.cm_pagenavi a {padding:10px}
.cm_pagenavi span {
  color:#888;
  background-color:#3c3c3c;
  padding:4px;
}
#comment-form {
  clear:both;
  margin:3em 0 0;
  padding:1.6em;
  -webkit-box-shadow:0 1px 5px black;
  -moz-box-shadow:0 1px 5px black;
  box-shadow:0 1px 5px black;
  width:auto;
  max-width:100%;
}
#respond p {font-size:96%}
#comment-editor {
  width:100%;
  height:270px;
  background:none;
}
#frame-outer {position:relative}
#cancel-answer {display:none}
.cm_wrap #comment-form {
  margin:4px 0 0;
  border:1px solid #3c3c3c;
  -webkit-box-shadow:0 1px 2px black;
  -moz-box-shadow:0 1px 2px black;
  box-shadow:0 1px 2px black;
}
.cm_wrap #cancel-answer {display:inline}
.cm_wrap #comment-form .heads-up {display:none}
img.emo,input.emo-key {
  position:relative;
  cursor:pointer;
  width:auto;
  vertical-align:middle;
}
input.emo-key {
  background-color:black;
  border:none;
  font-size:12px;
  font-weight:normal;
  color:white;
  margin:0 0 0 5px;
  padding:1px;
}

/* Share Buttons */
.atm-i {
  border-color:#bbb;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
}
.atm-s a:hover,#at_hover.atm-s a:hover {color:white!important}
.addthis_toolbox {
  clear:both;
  width:90%;
  height:20px;
  margin:0 0 2px 1%;
  position:relative;
}
.addthis-tooltip {
  display:block;
  width:150px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  color:white;
  font-size:96%;
  text-align:center;
  white-space:nowrap;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
}
.addthis-tooltip:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:10px;
}
.addthis_toolbox .addthis_inner:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:25px;
}

/* Bottom Checkbox */
#checker-box {
  position:fixed !important;
  position:absolute;
  bottom:0;
  right:20px;
  border:2px solid #888;
  border-bottom-width:0;
  background-color:#B2B2B2;
  font-size:96%;
  z-index:80;
  padding:2px 1.5% 2px 2px;
}
#ckecker-box input {margin-bottom:.4em}
#checker-box label {
  position:relative;
  top:-2px;
}
#toggle-code-view {
  margin:.4em;
  top:0;
}

/* Tooltips */
.toolpik,.tt-search {
  position:fixed;
  top:40px;
  left:20px;
  z-index:1000;
  background-color:white;
  border:1px solid #bbb;
  letter-spacing:0;
  text-transform:none;
  font:inherit;
  font:normal normal 12px/1.4 Arial,Sans-Serif;
  color:#333;
  padding:3px 7px 4px;
  -webkit-box-shadow:3px 3px 3px -2px rgba(0,0,0,.2);
  -moz-box-shadow:3px 3px 3px -2px rgba(0,0,0,.2);
  box-shadow:3px 3px 3px -2px rgba(0,0,0,.2);
  width:300px;
  height:auto;
  text-align:left;
  display:none;
  *zoom:1;
}
.toolpik:after {
  content:"";
  display:table;
  clear:both;
}
.toolpik h2 {
  font-size:120%;
  margin:0 0 10px;
  padding:0;
  letter-spacing:0;
}
.toolpik p {margin:10px 0}
.tt-search {
  position:absolute;
  z-index:99999;
  margin:30px 0 0 50px;
  width:auto;
  white-space:nowrap;
}
.tt-search .anchor {
  display:block;
  color:#4A87B8;
  cursor:pointer;
}
.tt-search .anchor:hover {text-decoration:underline}

/* Code Block */
pre,i[rel="pre"] {
  display:block;
  font:normal normal 12px/normal "Courier New",Courier,Monospace;
  color:#839496;
  padding:.5em .5em .5em 1em;
  background-color:#002b36;
  border-left:4px solid #268bd2;
  position:relative;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
}
pre code {
  display:block;
  font:inherit;
  color:inherit;
  letter-spacing:0;
  white-space:pre;
}
pre[rel="HTML"],pre[data-codetype="HTML"] {border-left-color:#4584BE}
pre[rel="CSS"],pre[data-codetype="CSS"] {border-left-color:#5DA028}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"] {border-left-color:#bbb}
pre[rel="JQuery"],pre[data-codetype="JQuery"] {border-left-color:#7073CF}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"] {border-left-color:#E36B23}
pre[rel="XML"],pre[data-codetype="XML"] {border-left-color:#C44032}
pre[rel*="+"],pre[data-codetype*="+"] {border-left-color:#7C814D}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc {color:#586e75;font-style:italic}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title {color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color:#2aa198}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id {color:#268bd2}
pre .tag .title,pre .rules .property,pre .django .tag .keyword {font-weight:bold}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label {color:#b58900}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata {color:#cb4b16}
pre .deletion {color:#dc322f}
pre .tex .formula {background:#073642}
pre.numbered {
  border-left-width:2px;
  padding-left:1em;
}
pre .line-number,pre.numbered code {
  display:block;
  line-height:16px;
}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#586E75;
  border-right:2px solid #05313B;
  text-align:right;
  min-width:35px;
}
pre .line-number span {
  display:block;
  position:relative;
  padding:0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {background-color:#03242C}
pre .line-number span em {
  position:absolute;
  bottom:-1px;
  left:100%;
  background-color:orange;
  padding:0 2px 1px 2px;
  border:1px solid black;
  font-style:normal;
  color:black;
  display:none;
}
pre .line-number span:hover em {display:block}
pre .line-number span:target a {
  display:block;
  color:white;
  position:relative;
  background-color:#268bd2;
  margin:0 -.5em 0 -1em;
  padding:0 .5em 0 0;
}
pre.numbered code span {line-height:12px}
pre[data-codetype="HTML"] .line-number span:target a {background-color:#4584BE}
pre[data-codetype="CSS"] .line-number span:target a {background-color:#5DA028}
pre[data-codetype="JavaScript"] .line-number span:target a {background-color:#bbb}
pre[data-codetype="JQuery"] .line-number span:target a {background-color:#7073CF}
pre[data-codetype="JQuery UI"] .line-number span:target a {background-color:#E36B23}
pre[data-codetype="XML"] .line-number span:target a {background-color:#C44032}
pre[data-codetype*="+"] .line-number span:target a {background-color:#7C814D}
pre .line-number span:target:before {
  content:"";
  display:block;
  height:150px;
  margin-top:-150px;
  visibility:hidden;
}
.bright-code pre {
  background-color:white;
  color:#657b83;
  border:1px solid #E9E7E0;
}
.bright-code pre code {color:#657b83}
.bright-code pre .line-number {border-right-color:#6CE26C}
.bright-code pre .line-number span a {color:#bbb}
.bright-code pre .line-number span:nth-child(even) {background-color:#eee}
.bright-code pre .line-number span:target,pre .line-number span:target {background:none}
.bright-code pre .line-number span:target a {color:black}
.bright-code .comment,.bright-code .template_comment,.bright-code .diff .header,.bright-code .doctype,.bright-code .lisp .string,.bright-code .javadoc {color:#bbb}
pre .highlight,pre .highlight span,pre .highlight span[class],pre mark,pre mark span,pre mark span[class] {color:black}
pre code .branch-link,pre code .branch-link:hover {
  background-color:#052127;
  color:#839496;
  text-decoration:none;
  border:1px dotted;
  line-height:12px;
}

/* #93a1a1 */
pre.plain,.bright-code pre.plain {
  border:1px solid #ccc;
  background:none;
  padding:1.5em 2em;
  margin-left:0;
  margin-right:0;
}
.recent-comments {
  border:2px solid #111;
  margin:0 0 10px;
  min-height:175px;
}
.recent-comments ul,.recent-comments li {
  text-align:left;
  margin:0;
  padding:0;
  list-style:none;
  font-size:86%;
  line-height:normal;
  color:#ccc;
}
.recent-comments li {
  padding:5px 10px;
  background-color:#7C0505;
  border-bottom:1px solid #640505;
  position:relative;
  overflow:hidden;
}
.recent-comments li:hover,.recent-comments li:first-child {background-color:#650606}
.recent-comments a {color:white}
.post:not([data-author]) {display:none}

/* For Disabled JavaScript */
.no-js .recent-comments {display:none}
.no-js #cm_block,.no-js #about:target {
  visibility:visible;
  display:block;
}
.no-js div:target .cm_entry,.comments .selected .cm_entry {border:2px solid yellow}
.no-js div:target .avatar-image-container,.comments .selected .avatar-image-container {
  border:5px solid yellow;
  padding:0 0;
}

/* Hibernation */
.hibernate-mode #comment-editor {display:none}
.hibernate-mode .cm_head a {background-color:#555}
.hibernate-mode .cm_entry .author-mark {border-color:transparent #3c3c3c #3c3c3c transparent}
.comments .hibernate-mode a {color:#999}
.hibernate-mode .cm_entry img {opacity:.4}
.hibernate-mode .recent-comments li {
  background-color:#444;
  border-bottom-color:#333;
}
.hibernate-mode .recent-comments li:first-child,.hibernate-mode .recent-comments li:hover {background-color:#3c3c3c}
.hibernate-mode .avatar-image-container.admin-avatar {background:none}


/* Media Queries */
@media (max-width:1250px) {
  #out-shadow {width:auto}
  img {
    max-width:98%;
    height:auto;
  }
}
@media (max-width:1024px) {
  #out-shadow {
    margin-left:.5%;
    margin-right:.5%;
  }
  #top-ribbon {right:24%}
}
@media (max-width:860px) {
  body {
    -webkit-animation:init .5s;
    -moz-animation:init .5s;
    -ms-animation:init .5s;
    -o-animation:init .5s;
    animation:init .5s;
    overflow-x:hidden !important;
  }
  #main-wrapper,#about .col.float-left,#about .col.float-right {
    float:none;
    display:block;
    width:auto;
    height:auto;
    margin:0 1% 1.5em;
  }
  #sidebar-wrapper,#ad-wrapper {margin:0 1% 1%}
  #sidebar-wrapper {
    float:left;
    display:inline;
    width:46%;
    height:auto;
    right:0;
  }
  #ad-wrapper {
    float:none;
    display:block;
    width:auto;
    margin:2% 1.5%;
    padding:5px;
  }
  #ad-1 {margin:0}
  .sidebar-box {
    display:inline;
    float:right;
    width:48%;
    margin:0 1% 10px 0;
    border:4px solid #ddd;
  }
  .breadcrumb .kanan {display:none}
  #top-ribbon {right:-140px}
  #ad-banner-wrapper {
    text-align:center;
    margin:0;
  }
  img.ad-banner {
    margin:0;
    width:auto;
    max-width:92.88%;
  }
  .addthis_toolbox {
    clear:both;
    width:auto;
    height:24px;
    padding:5px 14px 6px;
  }
  .index .addthis_toolbox {
    border-top-color:transparent;
    background:none;
  }
  .addthis_toolbox a.subscribe {
    float:right;
    display:block;
    top:-1px;
    padding:2px 7px;
  }
  #subscribe-form {
    width:192px;
    height:250px;
    margin-top:2px;
  }
  #subscribe-form input.email-input {width:155px}
  #subscribe-form a.close-form {
    float:none;
    display:block;
    position:absolute;
    bottom:6px;
    right:0;
  }
}
@media (max-width:700px) {
  .index .post-outer {
    float:none;
    display:block;
    width:auto;
  }
}
@media (max-width:580px) {
  html {-webkit-text-size-adjust:none}
  #out-shadow {
    width:auto;
    margin:0 0 40px 0;
  }
  #header-wrapper {
    min-height:20px;
    height:auto !important;
    height:20px;
  }
  #status {
    position:fixed !important;
    position:absolute;
    top:4px;
    z-index:1200;
  }
  #cse-search-box {
    position:fixed !important;
    position:absolute;
    height:auto;
    background-color:#333;
    width:auto;
    top:0;
    right:0;
    left:0;
    z-index:1000;
    padding:9px 3% 10px;
    border-bottom:2px solid #aaa;
    -webkit-box-shadow:0 0 5px black;
    -moz-box-shadow:0 0 5px black;
    box-shadow:0 0 5px black;
  }
  input.search-field {margin:0}
  .post-outer {
    display:block;
    float:none;
    width:auto;
  }
  .post {
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
  }
  #top-ribbon {margin-top:42px}
  #main-nav li,#sidebar-wrapper,#ad-wrapper,.sidebar-box,#ad-bottom .container.float-left,#ad-bottom .container.float-right {
    float:none;
    display:block;
    width:auto;
  }
  #ad-bottom .container.float-left,#ad-bottom .container.float-right {
    padding:4%;
    margin:0;
  }
  #ad-bottom .container.float-left {margin-bottom:1em}
  #main-nav,#main-nav ul {height:auto}
  #main-nav {padding-bottom:2px}
  .index #main-nav {border-top:1px solid #222}
  .ad-banner-5 {display:none}
  #main-nav li {
    border-top:1px solid #444;
    border-bottom:1px solid #222;
    padding:0;
  }
  #main-nav li a {
    padding:0 1.2em;
    border:none;
  }
  #main-nav>ul>li.drop-down:before,
  #main-nav>ul>li.drop-down:after {
    content:"";
    display:block;
    width:20px;
    height:0;
    border:0 solid #666;
    border-top-width:4px;
    -webkit-box-shadow:0 -1px 0 #222;
    -moz-box-shadow:0 -1px 0 #222;
    box-shadow:0 -1px 0 #222;
    position:absolute;
    top:15px;
    right:10px;
    pointer-events:none;
  }
  #main-nav>ul>li.drop-down:after {
    width:0;
    height:20px;
    border-width:0 0 0 4px;
    top:7px;
    right:18px;
  }
  #main-nav>ul>li.drop-down.active:after {display:none}
  #main-nav li ul {
    position:static;
    width:auto;
  }
  #main-nav li ul li,#main-nav li ul li a {border:none}
  #main-nav li ul li a {
    border-top:1px solid #3c3c3c;
    background-color:#222;
  }
  #main-nav li ul li a:active {
    background-color:white;
    color:inherit;
  }
  .index .snippet-list .label-name {display:none}
  .sidebar-box {margin:10px 1% 0}
  .alignleft,.alignright,.align-left,.align-right {
    float:none;
    display:block;
    width:auto;
    margin:0 0 1.7em;
    text-align:center;
  }
  .post-body img,.comments iframe.video {max-width:90%}
  #main-nav li .float-right,#header-wrapper h1,#header-wrapper .description,#header-logo,.breadcrumb,.reaction-button,.post-body ins#aswift_0_anchor,.inline-ad .snippet-outer {display:none}
  #top-ribbon {
    top:-3px;
    right:-136px;
  }
  .addthis_toolbox {
    background-color:#eee;
    border-top:1px dotted #bbb;
    padding:12px 10px 4px;
    margin:5px auto 0;
  }
  .index .addthis_toolbox {
    border-top-color:transparent;
    background:none;
  }
  .addthis_toolbox a.subscribe {
    top:0;
    margin-top:-8px;
    margin-right:-5px;
    font-size:86%;
    font-weight:bold;
    padding:9px 15px 6px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
  }
  img.ad-banner {width:90%}
  .static_page #main-nav {border-bottom:none}
  .cm_wrap {font-size:96%}
  .cm_head {
    float:none;
    width:auto;
    height:50px;
    margin:0 55px 0 0;
    position:relative;
  }
  .cm_head a.answer-this-comment,.cm_head a.comment-delete {
    float:left;
    margin:0 0 10px 10px;
    padding:.7em 1em;
    font:inherit;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
  }
  .cm_head .avatar-image-container {
    position:absolute;
    top:-10px;
    left:100%;
  }
  .cm_entry {margin:0 0 30px 0}
  #comment-form {margin-top:0}
  .cm_wrap #comment-form {margin-bottom:30px}
  #respond a.button {
    width:90%;
    padding:.7em 1.2em;
  }
  .recent-comments li {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}